{extend name="public/base"/} {block name="body"}
<style>
.complete-box { height: 100%; margin-bottom: -40px; background: #FFF;}
.complete-wrap { padding:15px 8px 0px; background: #FFF; }
.complete-wrap p.tips,.complete-wrap p.orderno{ font-size: 1.3em; color: #57b174; text-align: left; }

.complete-wrap p.orderno { margin-bottom: 3px; }
.complete-wrap table { margin: 0 auto; }
.complete-wrap table tr td { font-size: 1em; color: #57b174; text-align: left; }
.complete-wrap table tr td img { width: 30px; height: 30px; margin-right: 5px; vertical-align: middle; }
.complete-inner { padding: 10px 8px; margin-top: 15px;  margin-bottom: 50px; background: #f8f8f8; border: solid 1px #dddddd; }
.complete-inner-cancel { border-width: 0; background: none; }
.complete-fruit-box {  margin-bottom: 20px;  }
.complete-fruit-box img { display: block; margin: 0 auto 5px; }
.complete-fruit-box p { font-size: 0.875em; color:  #b2b2b2; text-align: center; }
.complete-top { padding-top: 15px; }
.complete-wrap p.content { display: block; margin-bottom: 20px;  font-size: 1em; color: #696969;  }
.complete-wrap p.content span { color: #57b174; }
.complete-wrap p.hot-line { margin-bottom: 0; color: #b2b2b2; font-size: 0.875em; }
.complete-wrap div.snap-up { font-size: 1.2em; color: #696969; }
.share-btn-cart { display: block; width: 42%; padding: 6px 12px; margin: 0 auto;  font-size: 1.1em; text-align: center;  color: #FFF; background-color: #57b174; border-radius: 2em; }
.share-btn-cart:hover{ text-decoration: none; color: #FFF; }
.complete-wrap div.container-fluid { background: #FFF; }

.navbar-app a.viewMyOrderBtn,.navbar-app a.back2homeBtn { display:inline-block; width: 42%; height: 35px; line-height: 35px; margin-top: 8px; font-size: 1em; color: #FFF; text-decoration: none; }
.navbar-app a.viewMyOrderBtn { background-color: #ff8135; }
.navbar-app a.viewMyOrderBtn:hover,.navbar-app a.back2homeBtn:hover,.navbar-app a.viewMyOrderBtn:active,.navbar-app a.back2homeBtn:active { color: #FFF; }
.navbar-app a.back2homeBtn { margin-right: 5%; background-color: #57b174;  }
.btn_complete_know { color: #FFFFFF; }
.btn_complete_know:hover,.btn_complete_know:active { color: #FFFFFF;}

.complete-footer { width: 100%; height: 50px;  background: #fcfaec; }
.complete-footer-inner { width: 90%; margin: 0 auto; text-align: center; }
</style>
<header class="mui-bar mui-bar-nav" style="z-index:7">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">下单成功</h1>
</header>
<div class="mui-content ">
  <div class="complete-box" id="complete-box" >
      <div class="complete-wrap">
          <table style="margin-top:150px;">
              <tbody>
                  <tr>
                      <td><img src="http://m.bingofresh.com/v3.5/ui/images/complete-status.png" width="35" height="35"></td>
                      <td>
                          <p style="font-size: 2.0em;">亲,你已成功下单</p>
                      </td>
                  </tr>
              </tbody>
          </table>
      </div>
  </div>
  <div class="navbar navbar-app navbar-absolute-bottom">
      <div class="complete-footer">
        <div class="navbar navbar-app navbar-absolute-bottom">
            <div class="complete-footer">
                <div class="complete-footer-inner"> <a href="{:url('index/index')}" class="back2homeBtn border-radius">我知道了</a> <a href="{:url('index/order/index')}" class="viewMyOrderBtn border-radius">查看我的订单</a> </div>
            </div>
        </div>
      </div>
  </div>
</div>

{/block}
{block name="script"}
  <script type="text/javascript">
    $(function(){
        $('#complete-box').height($(window).height()-46)
    })

    $(function(){
        pushHistory();
        var bool=false;
        setTimeout(function(){
              bool=true;
        },1500);
        window.addEventListener("popstate", function(e) {
          if(bool)
            {
                  
                    location.href="{:url('index/order/index')}";
            }
            pushHistory();

          }, false);
    });
    function pushHistory() {
      var state = {
          title: "title",
          url: "#"
      };
      window.history.pushState(state, "title", "#");
    }

  </script>
{/block}
